<template>
  <el-select
    v-model="listQuery.userId"
    class="filter-item"
    filterable
    placeholder="请输入用户姓名"
    remote
    clearable
    reserve-keyword
    :remote-method="remoteSearch"
    @change="indexSelect"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.id+'|'+item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { userPage } from '@/api/user'
import { listQueryFilter } from '@/utils/tool'

export default {
  name: 'SearchOptionUser',
  props: {
    type: {
      required: false,
      type: Number
    }
  },
  data() {
    return {
      options: [],
      listQuery: { // 查询初始值
        page: 1,
        limit: 20,
        type: 1,
        name: '',
        userId: undefined
      }
    }
  },
  methods: {
    remoteSearch(query) {
      this.listQuery.type = this.type
      this.listQuery.name = query
      this.listQuery = listQueryFilter(this.listQuery)
      userPage(this.listQuery).then(res => {
        this.options = res.data
      })
    },
    indexSelect: function() {
      this.$emit('setSearchUserId', { userId: this.listQuery.userId })
    }
  }
}
</script>
